import { DatePicker, Select } from 'antd'
import { RangePickerProps } from 'antd/es/date-picker'
import dayjs from 'dayjs'
import { platformTypeOptions, typeOptions, userTypeOptions } from './constants'
import './index.less'
import { ConditionsType } from './types'

const { RangePicker } = DatePicker
const disabledDate: RangePickerProps['disabledDate'] = current => {
  return current && current > dayjs().subtract(1, 'day').endOf('day')
}

const DataBoardHeader = ({
  countDate,
  condition,
  onConditionChange
}: {
  countDate: string
  condition: ConditionsType
  onConditionChange: (condition: ConditionsType) => void
}) => {
  const handleChange = (key, value) => {
    console.log(`handleChange: ${key}: ${value}`)
    onConditionChange({
      ...condition,
      [key]: value
    })
  }

  const handleTimeChange = (dates, dateStrings) => {
    console.log('handleTimeChange', dates, dateStrings, dates[0].valueOf())
    onConditionChange({
      ...condition,
      timeRange: [dates[0].valueOf(), dates[1].valueOf()]
    })
  }

  // const updateTime = dayjs().subtract(1, 'day').startOf('day').format(dateFormat)
  const timeRange = condition.timeRange

  return (
    <div className="board-header">
      <div className="time-info">{`更新于${countDate || '--'}（每天凌晨5点进行数据更新）`}</div>
      <div className="">
        <div className="custom-select-container">
          <span className="fixed-content">统计周期：</span>
          <Select
            style={{ width: 144 }} // 设置 padding 以适应左侧固定内容
            onChange={value => handleChange('type', value)}
            defaultValue={'day'}
            className="period-select"
            getPopupContainer={triggerNode => triggerNode.parentNode} // 确保下拉菜单相对于父容器定位
            options={typeOptions}
          ></Select>
        </div>
        <div className="custom-select-container">
          <span className="fixed-content">用户：</span>
          <Select
            style={{ width: 144 }} // 设置 padding 以适应左侧固定内容
            onChange={value => handleChange('user', value)}
            defaultValue={'all'}
            className="common-select"
            getPopupContainer={triggerNode => triggerNode.parentNode} // 确保下拉菜单相对于父容器定位
            options={userTypeOptions}
          ></Select>
        </div>
        <div className="custom-select-container">
          <span className="fixed-content">平台：</span>
          <Select
            style={{ width: 144 }} // 设置 padding 以适应左侧固定内容
            onChange={value => handleChange('platform', value)}
            defaultValue={'all'}
            className="common-select"
            getPopupContainer={triggerNode => triggerNode.parentNode} // 确保下拉菜单相对于父容器定位
            options={platformTypeOptions}
          ></Select>
        </div>
        <div className="custom-select-container">
          <RangePicker
            placeholder={['开始日期', '结束日期']}
            defaultValue={timeRange}
            allowClear={false}
            disabledDate={disabledDate}
            onChange={handleTimeChange}
            width={280}
          />
        </div>
      </div>
    </div>
  )
}

export default DataBoardHeader
